طراحی سایت در مشهد

درین گرد هم آیی از یادگرفتن پباده سازی قالب، محتوای HTML را کامل شدن خوا هیم کرد.

بعد از بخش Header استارت می کنیم.

header
در شرایطی که طرح فتوشاپ را در حیث بگیرید، هدر ما به دو بخش راست و چپ تقسیم می‌گردد.

پس برای اینکار کدمان را به صورت پایین گسترش میدهیم.

نکته :
توجه نمائید که در قالب‌های rtl، (راست به چپ) نصیب راست بر نصیب چپ مقدم‌خیس میباشد، ولی در قالب‌های ltr (چپ به راست) این مسئله برعکس میباشد،

مثلا در‌صورتی‌که قالبمان انگلیسی بود کد ما به صورت ذیل تغییر تحول میکرد :

خب، در نصیب راست قالب ما دو نصیب دیگر تحت عنوان لوگو و توضیح داریم. و در نصیب چپ آیکون کانال‌های اجتماعی و فرم کاوش. پس مجدد کد را به صورت ذیل بسط می‌دیم.

هم اکنون می بایست هر بخش را با تگ معیّنی در نصیب متبوع وارد کنیم که به ترتیب ذیل میباشد :

Logo : لوگوی وبسایت ، که در اینجا ما اسم وب سایت را قرار داده ایم را با استعمال از تگ h1 می‌نویسیم

Title : توضیح وب سایت را به جهت اینکه اهمیت کمتری نسبت به اسم وبسایت داراست را با استعمال از تگ h2 می‌نویسیم.

Social Network icons : آیکون‌ها را با به کارگیری از تگ img وارد می کنیم.

Search : برای نصیب کاوش نیز از تگ form به کارگیری می کنیم.

با اعتنا به توضیحات بالا کد ما به صورت پایین تغییر‌و تحول خواهد کرد.

سایت اینجانب

یک تارنما دیگر با ورد÷رس

\"facebook\"سایت اینجانب در فیسبوک\" />
\"twitter\"تارنما اینجانب در تویتر\" />
\"googleوب سایت اینجانب در گوگل پلاس\" />
\"rss\"تارنما اینجانب\" />

\"<span
کاوش...\" />
\"\"

چنانچه تمامی امور را به صحت انجام داده اید هنگام اجرای کد در مرورگر شاهد چنین سود ای خواهید بود :

نکته :
برهان اینکه value دکمه کاوش را خالی گذاشتیم این میباشد که بعدا می خواهیم بجای دکمه از آیکون به کار گیری کنیم.

خب در حالتی که اعتنا نمایید آیکون‌های کانال اجتماعی می بایست به کاغذ ای لینک و پیوند شوند البته ما اینجا تنها از تگ img استعمال کرده ایم برای اینکار تک تک تگ‌های img را داخل تگ a مانند کد تحت قرار میدهیم.

\"facebook\"سایت اینجانب در فیسبوک\" />
\"twitter\"تارنما اینجانب در تویتر\" />
\"googleسایت اینجانب در گوگل پلاس\" />
\"rss\"تارنما اینجانب\" />

ولی چونکه موقتا پیوند ما مشخص و معلوم وجود ندارد، نشانی را # قرار میدهیم.

خب در صورتی‌که به طرح psdمان برگردیم، نصیب منو را هم داشتیم که در تحت هدر قراردارد پس برای افزودن آن کد تحت را بعد از آن تگ (.left) قرار می دهیم.

کاغذ اصلی

یادگرفتن ها

همیاری

تبلیغات

تماس با اینجانب

در رابطه اینجانب

نقشه تارنما

Sidebar
ردیف‌های کناری ما دارنده اجزاء کوچکتری به اسم بلوک یا این که به عبارتی جعبه‌ها می باشند که عنوان ها مختلفی از گزاره موضوعات، لینک و پیوند ها، تجهیزات، اخرین مطالب، تبلیغات و.. می گیرند.

طبق طرحمان، ما صرفا دو بلوک موضوعات و تبلیغات را داریم که موضوعات در ردیف راست و تبلیغات در ردیف چپ قرار می گیرد، البته برخی از عزیزان گفته بودند که چه گونه بقیه بلوک‌ها را هم بیشتر کنیم؟ در حالتی‌که به کدها اعتنا نمایید متوجه خواهید شد چه طور اینکار را انجام دهید :

کد فعلی ما این میباشد :

برای تولید بلوک یه div با کلاس block ساخت میکنیم

بعد نصیب تیتر بلوک و محتوای آن را نیز صحیح می کنیم و آن را در ردیف راست قرار می دهیم :

موضوعات

می اقتدار از تگ ul نیز برای تولید قضیه‌های وب سایت بهره مند شد :

موضوعات

قضیه شماره 1

مسئله شماره 2

زمینه شماره 3

می اقتدار یک بلوک دیگر با تیتر پایانی مطالب را بعد از بلوک موضوعات به صورت ذیل ساخت :

موضوعات

مسئله شماره 1

قضیه شماره 2

زمینه شماره 3

آخری مطالب

مورد شماره 1

مسئله شماره 2

قضیه شماره 3

ردیف تبلیغات را نیز به همین صورت ساخت می کنیم و بجای تگ ul از img برای وارد کردن تصاویر تبلیغات به کار گیری می کنیم.و یک بلوک دیگر با تیتر پیوندها نیز پس از تبلیغات تولید می کنیم :